<template>
  <div class="pad-20 pad-b-20 bgc-white">
    <template v-if="platList && platList.length > 0">
      <div v-for="(itemPlat, indexPlat) of platList" :key="indexPlat" class="list mar-b-20">
        <div class="flex flex-between subject">
          <span>{{itemPlat.platName}}</span>
          <span v-if="itemPlat.platShopList && itemPlat.platShopList.length > 5" class="cursor-p v-align-c"
            @click="showAllShop(itemPlat)">查看全部<el-icon color="#000">
              <arrow-right />
            </el-icon></span>
        </div>
        <el-row class="pad-l-20 pad-r-20 pad-b-20" :gutter="28"
          :class="itemPlat.showAll ? 'animation-show': 'list-item-height'">
          <el-col v-for="(itemShop, indexShop) of itemPlat.platShopList" :key="indexShop" :span="6" class="shop-box">
            <div class="shop-info flex pad-14 mar-t-20">
              <img class="width-66 height-66" :src="itemShop.shopPicUrl" alt="">
              <div class="font-14 mar-l-6 flex-col">
                <span class="">望远镜的小商店</span>
                <span class="font-color-6">店铺名称：{{itemShop.shopName}}</span>
                <div class="flex">
                  <span>已授权</span>
                  <span>重新授权</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </template>
    <template v-else>
      <none-data></none-data>
    </template>
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    ref,
    onMounted
  } from 'vue'
  import {
    ArrowRight
  } from '@element-plus/icons-vue'
  import noneData from '@/components/noneData/index.vue'

  export default defineComponent({
    components: {
      ArrowRight,
      noneData
    },
    setup() {
      const platList = ref([])
      onMounted(() => {
        // let platObj = {
        //   platName: '抖音小店',
        //   showAll: false,
        //   platShopList: [{
        //     shopPicUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic153.nipic.com%2Ffile%2F20180116%2F8737320_170317603036_2.jpg&refer=http%3A%2F%2Fpic153.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646876869&t=735c4dec0d8b574f5a0b36b9c548c37d',
        //     shopName: '卖卖卖啥'
        //   }, {
        //     shopPicUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic153.nipic.com%2Ffile%2F20180116%2F8737320_170317603036_2.jpg&refer=http%3A%2F%2Fpic153.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646876869&t=735c4dec0d8b574f5a0b36b9c548c37d',
        //     shopName: '抖抖店'
        //   }, {
        //     shopPicUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic153.nipic.com%2Ffile%2F20180116%2F8737320_170317603036_2.jpg&refer=http%3A%2F%2Fpic153.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646876869&t=735c4dec0d8b574f5a0b36b9c548c37d',
        //     shopName: '京豆店'
        //   }, {
        //     shopPicUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic153.nipic.com%2Ffile%2F20180116%2F8737320_170317603036_2.jpg&refer=http%3A%2F%2Fpic153.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646876869&t=735c4dec0d8b574f5a0b36b9c548c37d',
        //     shopName: '小小店'
        //   }, {
        //     shopPicUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic153.nipic.com%2Ffile%2F20180116%2F8737320_170317603036_2.jpg&refer=http%3A%2F%2Fpic153.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646876869&t=735c4dec0d8b574f5a0b36b9c548c37d',
        //     shopName: '不知道卖啥店'
        //   }, {
        //     shopPicUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic153.nipic.com%2Ffile%2F20180116%2F8737320_170317603036_2.jpg&refer=http%3A%2F%2Fpic153.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646876869&t=735c4dec0d8b574f5a0b36b9c548c37d',
        //     shopName: '精品店'
        //   }]
        // }
        // platList.value.push(platObj)
        // platObj = {
        //   platName: '拼多多小店',
        //   showAll: false,
        //   platShopList: [{
        //     shopPicUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic153.nipic.com%2Ffile%2F20180116%2F8737320_170317603036_2.jpg&refer=http%3A%2F%2Fpic153.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646876869&t=735c4dec0d8b574f5a0b36b9c548c37d',
        //     shopName: '卖卖卖啥'
        //   }, {
        //     shopPicUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic153.nipic.com%2Ffile%2F20180116%2F8737320_170317603036_2.jpg&refer=http%3A%2F%2Fpic153.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646876869&t=735c4dec0d8b574f5a0b36b9c548c37d',
        //     shopName: '抖抖店'
        //   }, {
        //     shopPicUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic153.nipic.com%2Ffile%2F20180116%2F8737320_170317603036_2.jpg&refer=http%3A%2F%2Fpic153.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646876869&t=735c4dec0d8b574f5a0b36b9c548c37d',
        //     shopName: '京豆店'
        //   }, {
        //     shopPicUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic153.nipic.com%2Ffile%2F20180116%2F8737320_170317603036_2.jpg&refer=http%3A%2F%2Fpic153.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646876869&t=735c4dec0d8b574f5a0b36b9c548c37d',
        //     shopName: '小小店'
        //   }, {
        //     shopPicUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic153.nipic.com%2Ffile%2F20180116%2F8737320_170317603036_2.jpg&refer=http%3A%2F%2Fpic153.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646876869&t=735c4dec0d8b574f5a0b36b9c548c37d',
        //     shopName: '不知道卖啥店'
        //   }, {
        //     shopPicUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic153.nipic.com%2Ffile%2F20180116%2F8737320_170317603036_2.jpg&refer=http%3A%2F%2Fpic153.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646876869&t=735c4dec0d8b574f5a0b36b9c548c37d',
        //     shopName: '精品店'
        //   }]
        // }
        // platList.value.push(platObj)
      })
      const showAllShop = (itemPlat: any) => {
        itemPlat.showAll = !itemPlat.showAll
      }
      return {
        showAllShop,
        platList
      }
    }
  })
</script>

<style lang="scss" scoped>
  .list {
    background: #F9FAFC;

    .shop-box {
      .shop-info {
        width: 254px;
        height: 96px;
        background: #FFFFFF;
        box-shadow: 0px 4px 6px 0px rgba(185, 185, 185, 0.16);
        border-radius: 4px;
      }
    }
  }

  .subject {
    padding: 17px 19px;
    border-bottom: 1px solid #F5F5F5;
  }

  .list-item-height {
    height: 140px;
    overflow: hidden;
  }

  .animation-show {
    animation: 'expend'1s;
  }

  @keyframes expend {
    0% {
      height: 140px
    }

    100% {
      height: auto
    }
  }
</style>
